<template>     
    <el-container class="home-container">
        <!-- 头部区域 -->
        <el-header>  
            <div class="header-box"><img class="header-img" src="../assets/logo.png" alt="">后台管理系统</div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="toggle-button" @click="toggle">|||</div>
                <el-menu :router="true" :default-active="$route.path" :collapse-transition="false" :unique-opened="true" :collapse="isCollapse" background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
                <el-submenu v-for="item in menuList" :key="item.id" :index="item.id + ''" >
                    <template slot="title">
                        <i :class="iconsObj[item.id]"></i>
                        <span class="author">{{item.author}}</span>
                    </template>
                    <el-menu-item v-for="subItem in item.chilren" :key="subItem.id" :index="'/'+subItem.path">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>{{subItem.authName}}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 主题区域 -->
            <el-main>
                <!-- 路由占位 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    export default {
        data() {
            return {
                //左侧菜单
                menuList:[
                    {author:'用户管理',chilren:[{authName:'用户列表',id:11,path:'user'}],id:1},
                    {author:'权限管理',chilren:[{authName:'角色列表',id:21,path:'roler'},{authName:'权限列表',id:22,path:'rights'}],id:2},
                    {author:'商品管理',chilren:[{authName:'商品列表',id:31,path:'shopList'},{authName:'分类参数',id:32,path:'classifyNum'},{authName:'商品分类',id:33,path:'shopClassify'}],id:3},
                    {author:'订单管理',id:4},
                    {author:'数据管理',id:5},
                ],
                iconsObj:{
                    '1':'iconfont icon-yonghu1', 
                    '2':'iconfont icon-ITquanxian', 
                    '3':'iconfont icon-shangpin-', 
                    '4':'iconfont icon-dingdanlan', 
                    '5':'iconfont icon-shuju'
                },
                isCollapse:false,
            }
        },
        created() {
           // this.getMenuList()
        },
        methods:{
            logout() {
                //清除sessionStorage中的token
               window.sessionStorage.clear();
               this.$router.push('/login') 
            },
            //菜单列表
            // async getMenuList() {
            //     const { data:res } = await this.$http.get('menus')
            // }
            //菜单折叠与展开
            toggle(){
                this.isCollapse = !this.isCollapse;
            }
        }
    }
</script>
<style lang="less" scoped>
.home-container {
    height:100%;
}
.el-header {
    color:#fff;
    background-color:#373d41;
    display:flex;
    align-items: center;
    justify-content: space-between;
    .header-box {
        font-size: 20px;
        display: flex;
        align-items: center;
    }
    .header-img {
        margin-right:10px;
        width:40px;
        height:40px;
    }
}

.el-aside {
    background-color:#333744;
    .author {
        margin-left:10px;
    }
}

.el-menu {
    border-right:0;
}

.el-main {
    background-color:#eaedf1;
}

.el-submenu__title {
    text-align: center;
}

.toggle-button {
    background-color:#4A5e64;
    font-size: 10px;
    color:#fff;
    padding:10px 0;
    text-align: center;
    letter-spacing: 0.2rem;
    cursor: pointer;
}
</style>